@import url(./base.less);
@vw: 3.75vw;
@beijing: #fff;
body {
  background-color: #f4f5f7;
}
.w {
  width: (332 / @vw);
  margin: 0 auto;
}
.max {
  position: relative;
  //   padding- : (60 / @vw);
  .main {
    margin: 0 auto;
    width: (351 / @vw);
    background-color: @beijing;
    border-radius: (4 / @vw);
    margin-bottom: (10 / @vw);
    .one {
      height: (319 / @vw);
      padding-top: (10 / @vw);
      // margin-bottom: (10 / @vw);
      img {
        width: 100%;
      }
      ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        //   justify-content: space-evenly;
        li {
          // background-color: aqua;
          width: (70 / @vw);
          height: (55 / @vw);
          // margin-right: (25 / @vw);
          margin-top: (15 / @vw);
          a {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            div {
              height: (36 / @vw);
              width: (36 / @vw);
              img {
                width: 100%;
              }
            }

            p {
              font-size: (12 / @vw);
              color: #333;
            }
          }
        }
      }
    }
  }
  .main-two {
    margin: 0 auto;
    width: (351 / @vw);
    background-color: @beijing;
    border-radius: (4 / @vw);
    margin-bottom: (10 / @vw);
    .one {
      height: (288 / @vw);
      background-color: #fff;
      .top {
        height: (50 / @vw);
        display: flex;
        justify-content: space-between;
        align-content: center;
        //   background-color: #333;
        h3 {
          display: flex;
          align-items: center;
          font-size: (17 / @vw);
          font-weight: 400;
          color: #333;
        }
        p {
          display: flex;
          align-items: center;
          font-size: (14 / @vw);
          color: #999;
        }
      }
      .bottom {
        margin-bottom: (10 / @vw);
        position: relative;
        height: (103 / @vw);
        display: flex;
        justify-content: space-between;
        .xiadan {
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          right: 0;
          bottom: (4 / @vw);
          width: (60 / @vw);
          height: (21 / @vw);
          border: solid (1 / @vw) #f57c00;
          border-radius: (2 / @vw);
          color: #f57c00;
          font-size: (12 / @vw);
        }
        .tu {
          width: (100 / @vw);
          height: (100 / @vw);
          border-radius: (8 / @vw);
          img {
            border-radius: (8 / @vw);
            width: 100%;
          }
        }
        .text {
          width: (224 / @vw);
          h3 {
            font-size: (16 / @vw);
            font-weight: 400;
            color: #333;
          }
          span {
            font-size: (12 / @vw);
            color: #999;
            .i1 {
              font-style: normal;
              color: #f94e4e;
            }
          }
          span:nth-child(2) {
            display: inline-block;
            margin-right: (20 / @vw);
            margin-top: (8 / @vw);
          }
          p {
            margin-top: (5 / @vw);
            font-size: (12 / @vw);
            color: #999;
            .sp3 {
              font-size: (14 / @vw);
              color: #f94e4e;
            }
          }
          p:nth-child(5) {
            margin-top: (17 / @vw);
            margin-left: (5 / @vw);
            font-size: (15 / @vw);
            color: #f94e4e;
          }
        }
      }
    }
  }
  .main-three {
    margin: 0 auto;
    margin-bottom: (10 / @vw);
    width: (351 / @vw);
    height: (90 / @vw);
    display: flex;
    justify-content: center;
    align-items: center;
    .tu {
      width: (325 / @vw);
      height: (90 / @vw);
    }
  }
  footer {
    width: 100%;
    position: sticky;
    z-index: 1;
    left: 0;
    bottom: 0;
    height: (60 / @vw);
    background-color: #fff;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    div {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      height: (27 / @vw);
      width: (30 / @vw);
      color: #c0c0c0;
      a {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        &.off:hover {
          color: #f57c00;
        }
        span {
          font-size: (20 / @vw);
        }
        p {
          display: flex;
          // margin-left: (2 / @vw);
          font-size: (12 / @vw);
        }
      }
    }
  }
}
